<template>
    <div class="container">
        <div class="main">
            <addStockInView ref="addStockInView" />
            <MedicalProductApply ref="MedicalProductApply" />

            <div class="header flex">
                <div class="header_item" style="margin-right: 5%;">
                    <img src="../../assets/images/medicalHome_banner1.png">
                </div>
                <div class="header_item">
                    <img src="../../assets/images/medicalHome_banner2.png">
                </div>
            </div>

            <div class="menu_box">
                <p class="menu_title">快捷功能</p>
                <div class="tab_box">
                    <div class="tab" @click="goStockOut">
                        <img src="../../assets/images/medicalHome_icon1.png">
                        <p>新增出库单</p>
                    </div>
                    <div class="tab" @click="goHandle('/MedicalProductIndex/stockOutReceiptList')">
                        <img src="../../assets/images/medicalHome_icon6.png">
                        <p>出库单</p>
                    </div>
                    <div class="tab" @click="goStockIn">
                        <img src="../../assets/images/medicalHome_icon2.png">
                        <p>新增入库单</p>
                    </div>
                    <div class="tab" @click="goHandle('/MedicalProductIndex/stockInReceiptList')">
                        <img src="../../assets/images/medicalHome_icon5.png">
                        <p>入库单</p>
                    </div>
                    <div class="tab" @click="goHandle1('/MedicalProductIndex/inventoryWarning', '库存预警')">
                        <img src="../../assets/images/medicalHome_icon3.png">
                        <p>库存预警</p>
                    </div>
                    <div class="tab" @click="goHandle1('/MedicalProductIndex/medicalProductAssets', '库存预警')">
                        <img src="../../assets/images/medicalHome_icon4.png">
                        <p>库存管理</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { httpService } from "@/utils/httpService";
import { ElConfigProvider, ElMessage, ElMessageBox, ElLoading } from "element-plus";
import { MoreFilled, } from "@element-plus/icons-vue";
import addMedicalProductClassify from "../../components/medicalProduct/addMedicalProductClassify.vue"
import importFileView from "../../components/medicalProduct/importFileView.vue"
import addStockInView from "../../components/medicalProduct/addStockInView.vue"
import MedicalProductApply from "../../components/medicalProduct/MedicalProductApply.vue"
import { mapState, mapActions } from 'vuex';

export default {
    name: "MedicalProductLogin",
    components: {
        addMedicalProductClassify, importFileView, MoreFilled, ElConfigProvider, addStockInView, MedicalProductApply,
    },
    data() {
        return {
            menuList: [],
            defaultPath1: "",
        };
    },

    computed: {
        ...mapState(['navMenuList', 'defaultPath']), // 映射仓库中的状态到组件

        defaultPath1() {
            console.log(9090, this.defaultPath);
            return this.defaultPath
        }
    },
    mounted() {
        this.getMenuLsit()
    },
    methods: {
        ...mapActions(['uploadAdd']),
        getMenuLsit() {
            httpService("/javaApi/baseMenu/queryMyTree", { "systemCode": "6050" }, "get").then((data) => {
                this.menuList = data[0].children;
                // console.log(this.menuList);
            });
        },
        goHandle(url) {
            this.$router.push({
                path: url,
            })
        },
        goHandle1(url, str) {
            this.$router.push({
                path: url,
            })
            const arr = this.menuList.filter(item => item.label == str)
            // console.log(str, arr[0], this.menuList);
            console.log(1111, arr[0], this.uploadAdd);
            if (arr.lenght > 0) {
                this.uploadAdd(arr[0])
            }
        },
        goStockIn() {
            this.$refs.addStockInView.flag = true
            this.$refs.addStockInView.getMaterialList()
            this.$refs.addStockInView.getNumberId()
        },
        goStockOut() {
            this.$refs.MedicalProductApply.flag = true
            this.$refs.MedicalProductApply.getDepartmentList()
            this.$refs.MedicalProductApply.getAssetsList()
            this.$refs.MedicalProductApply.getUserList()
            this.$refs.MedicalProductApply.getIdList()
        },

    },
};
</script>
<style scoped>
* {
    padding: 0;
    margin: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.container {
    width: calc(100vw - 30px);
    height: calc(100vh - 30px);
    padding: 15px 15px;
    background-color: #EEF7FB;
}

.main {
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
}

.header {
    margin-right: 10px;
    /* background-color: brown; */
}

.header_item {}

.header_item img {
    width: 105%;
}


.menu_title {
    margin: 72px 0 23px 18px; 
    color: #000;
    font-size: 18px;
    font-weight: bold;
}

.tab_box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.tab {
    display: flex;
    align-items: center;
    width: 243px;
    height: 105px;
    border-radius: 10px;
    margin-right: 23px;
    margin-bottom: 30px;
    box-shadow:
        0 5px 10px 3px rgba(39, 42, 185, 0.05),
        0 10px 20px rgba(39, 42, 185, 0.05);
    color: #000;
    font-size: 18px;
    cursor: pointer;
}

.tab img {
    margin: 0 22px 0 34px;
}
</style>